<template>
  <div class="personnel">
    <div class="personnel-box" v-for="(item, index) in gridPersonData" :key="index">
      <div class="personnel-box-left">
        <p>{{ item.gridPersonTypeName }}</p>
        <p>
          <span>{{ item.gridPersonName }}</span>
          <span>{{ item.phone }}</span>
        </p>
      </div>
      <div class="personnel-box-right" @click="videoClick(item)" v-if="user.gridPersonType === '5'">
        <img src="../../../../../assets/images/cockpit/home/home-video.png" />
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Cockpit from '@/api/cockpit'
export default {
  name: 'personnel',
  data() {
    return {
      gridPersonData: []
    }
  },
  computed: {
    ...mapState({
      user: state => state.userInfo
    })
  },
  mounted() {
    this.abnormal()
  },
  methods: {
    // 周边人员
    abnormal() {
      Cockpit.Online.around({ regionCode: this.user.regionCode }).then(res => {
        const data = { ...res.data.data }
        this.gridPersonData = data.gridPerson
      })
    },
    // 视频监控
    videoClick(item) {
      this.$eventBus.$emit('trtcCallingCall', item)
    }
  }
}
</script>

<style scoped lang="less">
.personnel {
  &-box {
    margin: 0 32px 16px 32px;
    height: 152px;
    background: #ffffff;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    p:nth-child(1) {
      font-size: 32px;
      font-weight: 500;
      color: #000000;
      padding: 32px 0 15px 32px;
    }
    p:nth-child(2) {
      padding-left: 32px;
      span:first-child {
        font-size: 28px;
        color: rgba(0, 0, 0, 0.78);
        padding-right: 80px;
      }
      span:last-child {
        font-size: 28px;
        color: rgba(0, 0, 0, 0.78);
      }
    }

    &-right {
      margin: auto 0;
      img {
        cursor: pointer;
      }
      img:first-child {
        padding-right: 32px;
      }
    }
  }
  &-box:first-child {
    margin-top: 16px;
  }
}
</style>
